<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="/fragments/header :: header-css"/>
</head>
<body class="bg-light">

<div th:replace="/fragments/header :: header"/>

<div class="container">

    <form class="form-signin" th:action="@{/login}" method="post">
        <h3 class="text-center">登录</h3>
        <fieldset>

            <div th:if="${param.error}">
                <div class="alert alert-danger">
                    无效的用户名密码
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>

            <div th:if="${param.logout}">
                <div class="alert alert-info">
                    你已经注销
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>

            <div class="form-label-group">
                <input type="text" name="username" id="username" class="form-control input-lg" value="user"
                       placeholder="用户名" required="true" autofocus="true"/>
            </div>

            <div class="form-label-group">
                <input type="password" name="password" id="password" class="form-control input-lg" value="123456"
                       placeholder="密码" required="true"/>
            </div>

            <input type="submit" class="btn btn-lg btn-primary btn-block" value="登录"/>

        </fieldset>
    </form>
</div>

<div th:replace="/fragments/footer :: footer"/>
<script>
    $(function () {
        $.ajax({
            //提交数据的类型 POST GET
            type:"POST",
            url:"/login",
            //提交的数据
            data:{username:"user",password:"123456"},
            //返回数据的格式
            dataType: "html",//"xml", "html", "script", "json", "jsonp", "text".
            //成功返回之后调用的函数
            success:function(data){
            }   ,
            //调用执行后调用的函数
            complete: function(XMLHttpRequest, textStatus){
            },
            //调用出错执行的函数
            error: function(){
                //请求出错处理
            }
        });
    })
</script>
</body>
</html>